<template>
	<view class="w-100">
		<view class="flex-1">
			<view class="flex-1" :style="'height:' + statusBarHeight + 'px;'"></view>
			<view class="flex-1 mx-3 row-ac-sb top-icon">
				<view class="row-ac">
					<view class="iconfont icon-fenleimenu" @click="showDrawer('showLeft')" v-if="loginStatus"></view>
					<view class="iconfont icon-saomiao ml-5" @click="toSaoyisao"></view>
				</view>
				<view class="row-ac mt-6" v-if="loginStatus">
					<view class="iconfont icon-name-card mr-1" @click="nvaTo('/pages/user/settings/usercard')"></view>
					<view class="font-s-3 text-light-muted">推广码</view>
				</view>
			</view>
			<view class="flex-1 row-ac mx-3 mt-5" v-if="!loginStatus" @tap="nvaTo('/pages/public/login')">
				<view class="user-img">
					<image src="https://test.createbei.com/files/common/headimg.png" mode=""></image>
				</view>
				<view class="font-s-5 ml-2">登录/注册</view>
			</view>
			<view class="flex-1 row-ac mx-3 mt-5" v-if="loginStatus">
				<view class="user-img">
					<image :src="userInfo.head_image" mode=""></image>
				</view>
				<view class="ml-2">
					<view class="row-ac">
						<view class="font-s-5 in1line">{{ userInfo.nickname || userInfo.username }}</view>
						<view class="duties-level-box row-ac font-s-1 ml-2" v-if="userInfo.duties_name">
							<view class="level-sign row font-s-4 mr-1">v</view>
							<view class="text-white">{{ userInfo.duties_name }}
							</view>
						</view>
					</view>
					<view class="row-ac mt-15">
						<view class="font-s-2 text-light-muted"><text class="mr-1">邀请码:</text>
							{{ userInfo.mark_id }}
						</view>
						<view class="ml-4 text-light-muted font-s-3" @click="paste(userInfo.mark_id)"><text
								class="iconfont icon-fuzhi"></text>复制</view>
					</view>
				</view>
			</view>
			<view class="flex-1 row-ac mt-3" v-if="loginStatus">
				<view class="flex-1 row-a-j-fc income-box">
					<view class="text-dark font-s-6 font-w">{{ statistics.today_points }}</view>
					<view class="flex-2 text-light-muted font-s-4 mt-1">今日收益</view>
				</view>
				<view class="flex-1 row-a-j-fc income-box">
					<view class="text-dark font-s-6 font-w">{{ statistics.this_month_points }}</view>
					<view class="flex-2 text-light-muted font-s-3 mt-1">本月总收益</view>
				</view>
				<view class="flex-1 row-a-j-fc income-box">
					<view class="text-dark font-s-6 font-w">{{ userInfo.integral_total }}</view>
					<view class="flex-2 text-light-muted font-s-3 mt-1">贝币余额</view>
				</view>
			</view>
			<view class="flex-1 mt-3 mx-3" @tap="nvaTo('/pages/user/help/online-income')">
				<image class="rounded" src="https://test.createbei.com/files/common/8201521745520.jpg"
					mode="widthFix" />
			</view>
			<view class="mt-2 flex-1 mx-3 bg-white py-4 rounded" v-if="loginStatus">
				<view class="flex-1 mx-3 row-ac-sb" @click="nvaTo('/pages/user/data/integral-data')">
					<view class="row-ac tab-title">
						<view class="iconfont icon-shouyi"></view>
						<view class="ml-1 font-w font-s-4">收益报表</view>
					</view>
					<view class="row-ac tab-right">
						<view class="iconfont icon-next-01 text-light-muted ml-2"></view>
					</view>
				</view>
			</view>
			<view class="mt-2 flex-1 mx-3 bg-white py-4 rounded" v-if="loginStatus">
				<view class="flex-1 mx-3 row-ac-sb" @click="nvaTo('/pages/user/partner/distribution/distribution-team')">
					<view class="row-ac tab-title">
						<view class="iconfont icon-yaoqing"></view>
						<view class="ml-1 font-w font-s-4">邀请好友</view>
					</view>
					<view class="row-ac tab-right" >
						<view class="font-w font-s-3 text-light-muted">已成功邀请 {{ statsInfo.all_invite || 0 }} 人</view>
						<view class="iconfont icon-next-01 text-light-muted ml-2"></view>
					</view>
				</view>
			</view>
			<view class="mt-2 flex-1 mx-3 bg-white py-4 rounded" v-if="loginStatus"
				@click="nvaTo('/pages/user/data/user-collect')">
				<view class="flex-1 mx-3 row-ac-sb">
					<view class="row-ac tab-title">
						<view class="iconfont icon-collect-01"></view>
						<view class="ml-1 font-w font-s-4">收藏</view>
					</view>
					<view class="row-ac tab-right">
						<view class="iconfont icon-next-01 text-light-muted ml-2"></view>
					</view>
				</view>
			</view>
			<view class="mt-2 flex-1 mx-3 bg-white py-4 rounded" @click="nvaTo('/pages/user/help/novice-help')">
				<view class="flex-1 mx-3 row-ac-sb">
					<view class="row-ac tab-title">
						<view class="iconfont icon-bangzhu"></view>
						<view class="ml-1 font-w font-s-4">新手帮助</view>
					</view>
					<view class="row-ac tab-right">
						<view class="iconfont icon-next-01 text-light-muted ml-2"></view>
					</view>
				</view>
			</view>
			<view class="mt-2 flex-1 mx-3 bg-white py-4 rounded" @click="nvaTo('/pages/user/help/copywriting-list')">
				<view class="flex-1 mx-3 row-ac-sb">
					<view class="row-ac tab-title">
						<view class="iconfont icon-knowledge"></view>
						<view class="ml-1 font-w font-s-4">推广文案</view>
					</view>
					<view class="row-ac tab-right">
						<view class="iconfont icon-next-01 text-light-muted ml-2"></view>
					</view>
				</view>
			</view>
			<view class="mt-2 flex-1 mx-3 bg-white py-4 rounded">
				<view class="flex-1 mx-3 row-ac-sb">
					<view class="row-ac tab-title">
						<view class="iconfont icon-fankui"></view>
						<view class="ml-1 font-w font-s-4">意见反馈</view>
					</view>
					<view class="row-ac tab-right">
						<view class="iconfont icon-next-01 text-light-muted ml-2"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-1">
			<uni-drawer ref="showLeft" mode="left" :width="200" @change="change($event,'showLeft')">
				<view class="flex-1">
					<view class="flex-1 left-icon" style="margin-left: 96rpx;">
						<view class="row-ac flex-1" style="margin-top: 130rpx;">
							<view class="iconfont icon-xinxitishicopy"></view>
							<view class="font-s-4 ml-2">账户与安全</view>
						</view>
						<view class="mt-6 row-ac flex-1" @click="toUserInfo">
							<view class="iconfont icon-shezhi"></view>
							<view class="font-s-4 ml-2">个人设置</view>
						</view>
					</view>
					<view class="my-5 flex-1 mx-3 border-bottom"></view>
					<view class="flex-1 left-icon" style="margin-left: 96rpx;">
						<view class="mt-6 row-ac flex-1" @click="nvaTo('/pages/user/settings/setting')">
							<view class="iconfont icon-jianchagengxin"></view>
							<view class="font-s-4 ml-2">通用设置</view>
						</view>
						<view class="mt-6 row-ac flex-1" @click="nvaTo('/pages/user/help/about-me')">
							<view class="iconfont icon-xinxitishicopy"></view>
							<view class="font-s-4 ml-2">关于我们</view>
						</view>
					</view>
					<view class="flex-1 mt-9 row">
						<view class="logout-box row font-s-4" @click="logout">退出登录</view>
					</view>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import jwtDecode from 'jwt-decode';
	import {
		userInfoUrl,
		statisticsUrl
	} from '@/api/index.js';
	import {
		commissionstatsUrl,
		distributorsSubUrl,
		distributionstatsUrl
	} from '@/api/promotion';
	export default {
		data() {
			return {
				statusBarHeight: '',
				loginStatus: false,
				userInfo: '',
				statistics: '',
				statsInfo:''
			}
		},
		created() {
			this.$getScreenInfo().then(res => {
				this.statusBarHeight = res.statusBarHeight + 12
			})
		},
		onLoad() {
			this.initData()
		},
		onShow() {
			this.initData();
		},
		onPullDownRefresh() {
			this.initData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			initData() {
				this.token = uni.getStorageSync('token')
				if (this.token != '') {
					this.loginStatus = true
					this.getUserInfo()
					this.getStatistics()
					this.getDistributionstats()
				} else {
					this.loginStatus = false
					this.userInfo = ''
				}
			},
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
				})
			},
			getStatistics() {
				this.$R.get(statisticsUrl).then(res => {
					this.statistics = res.data
				})
			},
			getDistributionstats() {
				this.$R.get(distributionstatsUrl).then(res => {
					this.statsInfo = res.data
				})
			},
			nvaTo(url) {
				if (this.loginStatus) {
					uni.navigateTo({
						url: url
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login',
					});
				}

			},
			paste(value) {
				uni.setClipboardData({
					data: value
				});
			},
			toSaoyisao() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: res.result,
						});
					}
				});
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				this[type] = e
			},
			toUserInfo() {
				uni.navigateTo({
					url: '/pages/user/settings/userset'
				});
			},
			logout() {
				uni.showModal({
					content: '是否要退出登陆',
					success: res => {
						if (res.confirm) {
							// 从缓存中移除用户信息
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('distributionUserCenterInfo');
							uni.removeStorageSync('distributionUserInfo');
							uni.removeStorageSync('defaultAddress');
							uni.removeStorageSync('weChatOpenId');
							this.$store.commit('setUserToken', '')
							uni.navigateBack({
								delta: 1
							});
							uni.showToast({
								title: '退出登陆成功'
							});
							this.initData();
						}
					}
				});
			},
			//唤醒其它APP
			// handleGoApp() {
			// 	if (plus.os.name == 'Android') {
			// 		const isApp = plus.runtime.isApplicationExist({
			// 			pname: 'uni.UNI775D410'
			// 		});
			// 		if (isApp) {
			// 			plus.runtime.launchApplication({
			// 				pname: "uni.UNI775D410",
			// 			}, (e) => {
			// 				console.log("e", e)
			// 			})
			// 		} else {
			// 			console.log('没有安装', '999999999');
			// 		}
			// 	}
			// }
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.top-icon {
		.iconfont {
			font-size: 46rpx;
		}
	}

	.left-icon {
		.iconfont {
			font-size: 42rpx;
		}
	}

	.icon-fuzhi {
		font-size: 25rpx;
	}

	.user-img {
		width: 136rpx;
		height: 136rpx;
		border-radius: 50%;

		image {
			width: 136rpx;
			height: 136rpx;
			border-radius: 50%;
		}
	}

	.duties-level-box {
		height: 36rpx;
		line-height: 36rpx;
		border-radius: 18rpx;
		background: #E48000;
		padding: 0 10px 0 0;

		.level-sign {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			background: linear-gradient(40deg, #EFD118, #EE8B00);
			color: #fff;
		}
	}

	.income-box {
		height: 80rpx;
	}

	.tab-title {
		.iconfont {
			font-size: 40rpx;
			color: #885700;
		}
	}

	.tab-right {
		.iconfont {
			font-size: 26rpx;
		}
	}

	.logout-box {
		width: 150rpx;
		height: 60rpx;
		border-radius: 6rpx;
		border: 1rpx solid #5C5C5C;
		color: #5C5C5C;
	}
</style>